<template>
  <div>
    <div class="pic">
      <van-image src="http://liufusong.top:8080/img/profile/bg.png" />
      <div class="userInfo">
        <div class="photo">
          <van-image
          width="70"
          height="70"
          radius="50"
          src="http://liufusong.top:8080/img/profile/avatar.png"
        />
        <div class="my_user">游客</div>
        <button  @click="$router.push('/loginlo')" v-if="isLogin">去登录</button>
        <button @click="logout" v-else>退出</button>
        </div>
      </div>
    </div>
    <van-grid column-num="3" :gutter="20" :border="false">
      <van-grid-item icon="star-o" text="我的收藏" @click="$router.push('/collect')" />
      <van-grid-item icon="wap-home-o" text="我的出租" @click="$router.push('/mylet')" />
      <van-grid-item icon="clock-o" text="看房记录" />
      <van-grid-item icon="idcard" text="成为房主" />
      <van-grid-item icon="user-o" text="个人资料" />
      <van-grid-item icon="service-o" text="联系我们" />
    </van-grid>
    <div class="bottom">
      <van-image src="http://liufusong.top:8080/img/profile/join.png" />
    </div>
  </div>
</template>

<script>
import { getToken, delToken } from '@/utils/storage'

export default {
  data () {
    return {
      isLogin: false
    }
  },
  created () {
    this.isLogin = !getToken()
  },
  methods: {
    logout () {
      this.$toast()
      delToken()
      this.isLogin = true
    }
  }
}
</script>
<style>
.pic {
  position: relative;
  margin-bottom: 70px;
}
.userInfo {
  position: absolute;
  top: 100px;
  left: 34px;
  width: 340px;
  height: 165px;
  background-color: #fff;
  z-index: 99;
}
.photo {
  position: absolute;
  top:-30px;
  left:136px
}
button {
  margin-top: 20px;
  text-align: center;
  width: 80px;
  height: 30px;
  border-radius:6px;
  background-color: #21B97A;
  color: #fff;
}
.my_user {
text-align: center;
margin-top: 20px;
}
.bottom {
  margin-top: 50px;
}
</style>
